<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            margin: 10px;
            float: left;
        }

        .box {
            width: 200px;
            height: 200px;
            /*不写left 默认是从上往下*/
            background: -moz-linear-gradient(red, blue, yellow);
            background: -webkit-linear-gradient(left, red, blue, yellow);
            background: -ms-linear-gradient(red, blue, yellow);
            background: -o-linear-gradient(red, blue, yellow);

            /*浏览器存在兼容性问题
            下面是浏览器兼容前缀
            -ms- IE
            -webkit- 谷歌和safari 默认
            -moz- firefox
            -o- opera */
        }

        .box2 {
            width: 200px;
            height: 200px;
            /*左上到右下*/
            background: linear-gradient(to bottom right, red, blue, yellow, green);
        }

        .box3 {
            width: 200px;
            height: 200px;
            /*左上到右下*/
            background: repeating-linear-gradient(red, yellow 10%, blue 20%);
        }

        .box4 {
            width: 200px;
            height: 200px;
            /*径向*/
            /* 语法 background: radial-gradient(center,形状，大小，开始的颜色，最后的颜色) */
            background: radial-gradient(red, yellow, blue);
        }

        .box5 {
            width: 300px;
            height: 30px;
            border-radius: 20px;
            border: 3px solid #000;
            background: linear-gradient(90deg, #E6E6FA 0%, #E6E6FA calc(1% * var(--per)),
            #6495ED calc(1% * var(--per)), #6495ED 100%);
        }


    </style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5" style="--per:45"></div>
<button onclick = "change()">change</button>

<script>
    function change(){

    }
</script>
</body>
</html>
